<html>
<head>
    <title>接口自动化测试报告</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3989305975,1987987943&fm=26&gp=0.jpg" rel="icon" type="image/x-icon" />
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.common.min.js"></script>


    <style type="text/css">
        .hidden-tr {
            display: none;
        }

        .PASS {
            color: #4cae4c;
        }

        .Fail {
            color: #f0ad4e;
        }

        .Error {
            color: #d43f3a;
        }
    </style>
</head>
<body style="white-space: nowrap;">

<div class="col-md-4 col-md-offset-4" style="margin-left:9%;">
    <h1>{{rest.pro_report}}</h1>
    <table class="table table-hover table-condensed">
        <tr>
            <td><strong>开始时间:</strong> {{rest.start_time}}</td>
        </tr>
        <tr>
            <td><strong>结束时间:</strong> {{rest.end_time}}</td>
        </tr>
        <tr>
            <td><strong>耗时:</strong> {{rest.time_ls}}</td>
        </tr>
        <tr>
            <td>
                <strong>结果:</strong>
                <span>All_Case： <strong>{{rest.All}}</strong></span>
                <span>Pass：    <strong>{{rest.Pass}}</strong></span>
                <span>Fail：     <strong>{{rest.Fail}}</strong></span>
                <span>Error：   <strong>{{rest.Error}}</strong></span>
            </td>
        </tr>
    </table>
</div>
<div id="chartss" style="width:50%;height:200px;float:right;top: 4%"></div>

<div class="row " style="margin:60px">
    <div style="margin-top: 18%;">
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" id="check-all" class="btn btn-primary">全部 {{rest.All}}</button>
            <button type="button" id="check-Success" class="btn btn-success">成功用例 {{rest.Pass}}</button>
            <button type="button" id="check-Fail" class="btn btn-warning">失败用例 {{rest.Fail}}</button>
            <button type="button" id="check-Error" class="btn btn-danger">错误用例 {{rest.Error}}</button>
            &nbsp&nbsp&nbsp&nbsp<p2>备注：</p2>
        </div>
        <div class="btn-group" role="group" aria-label="...">
        </div>
        <!--超出部分自动隐藏-->
        <!--
        <style>
            .TB-case-tr td {
                padding-left: 3px;
                padding-right: 3px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        </style>-->
        <table border="1" class="table table-hover table-condensed table-bordered" id="rest11"
               style="word-wrap:break-word; word-break:break-all;  margin-top: 7px;">
            <tr>
                <td><strong>用例ID&nbsp;</strong></td>
                <td><strong>用例名字</strong></td>
                <td><strong>URL</strong></td>
                <td><strong>请求方式</strong></td>
                <td style="text-align: center;"><strong>详情内容</strong></td>
                <td><strong>结果</strong></td>
            </tr>

            {% for item in bodys %}
            <tr class="TB-case-tr {{item.results}}">
                <td><p>Case_{{item.caseID}}</p></td>
                <td style="width: 19%;">{{item.casename}}</td>
                <td style="width: 30%;">{{item.url}}</td>
                <td>{{item.method}}</td>
                <td style="text-align: center; word-wrap:break-word; word-break:break-all;width: 444px">
                    <a href="javascript:showTestDetail('{{item.caseID}}')">{{item.request_conunt}}</a>
                    <div id="{{item.caseID}}" class="hidden-tr" style="width: 161%;">
                        <pre style="max-height: 400px;text-align:left;width: 430px;word-break:break-all;">请求参数：{{item.input_args}}<br>返回参数： {{item.rest}}</pre>
                    </div>
                </td>
                <td id="rest">{{item.results}}</td>
                <td class="hidden-tr">
                    <pre>测试结果</pre>
                </td>
            </tr>
            {% endfor %}
        </table>
        <script type="text/javascript">
            $("#check-Error").click(function (e) {
                $(".TB-case-tr").removeClass("hidden-tr");
                $(".PASS").addClass("hidden-tr");
                $(".Fail").addClass("hidden-tr");
            });
            $("#check-Fail").click(function (e) {
                $(".TB-case-tr").removeClass("hidden-tr");
                $(".PASS").addClass("hidden-tr");
                $(".Error").addClass("hidden-tr");

            });
            $("#check-Success").click(function (e) {
                $(".TB-case-tr").removeClass("hidden-tr");
                $(".Fail").addClass("hidden-tr");
                $(".Error").addClass("hidden-tr");
            });
            $("#check-all").click(function (e) {
                $(".TB-case-tr").removeClass("hidden-tr");
                <!-- 选择全部不报告内容-->
                <!--$(".success").addClass("hidden-tr");-->
            });
            var tb = document.getElementById('rest11');
            var rows = tb.rows;
            for (var i = 0; i < rows.length; i++) {
                <!--j=5是结果 从结果处开始循环-->
                for (var j = 1; j < rows[i].cells.length; j++) {    // 遍历该行的 td
                    var rests = rows[i].cells[j].innerHTML
                    if (rests.indexOf("warning") >= 0) {
                        console.log("---------", rests)
                    }
                }
            }

            function showTestDetail(div_id) {
                var details_div = document.getElementById(div_id)
                var displayState = details_div.style.display
                // alert(displayState)
                if (displayState !== 'block') {
                    displayState = 'block'
                    details_div.style.display = 'block'
                } else {
                    details_div.style.display = 'none'
                }
            }

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('chartss'));
            var Pass = document.getElementById('check-Success');
            var Fail = document.getElementById('check-Fail');
            var Error = document.getElementById('check-Error');
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '用例执行情况',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                color: ['#4cae4c', '#d43f3a', '#eea236'],
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['通过', '失败', '错误']
                },
                series: [
                    {
                        name: '测试执行情况',
                        type: 'pie',
                        radius: '60%',
                        center: ['50%', '60%'],
                        data: [
                            {value: {{rest.Pass}},  name: '通过'},
                            {value: {{rest.Fail}},  name: '失败'},
                            {value: {{rest.Error}}, name: '错误'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </div>
</div>
</body>
</html>
